<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/details.css" />
		<link rel="stylesheet" type="text/css" href="font_2856337_vzn5skukds/iconfont.css" />
	</head>
	<body>
		<!-- 头部 -->  
		<header></header>
		<!-- 右侧边栏 -->
		<aside></aside>
		<!-- 中间 -->
		<div id="center">
		
			<ol>
				<li><a href="" >电视</a></li>
				<li><span class="iconfont icon-xiangyoujiantou"></span><a href="#">超薄电视</a></li>
				<li><span class="iconfont icon-xiangyoujiantou"></span><a href="#" class="dstp"></a></li>
			</ol>
			<!-- 左边放大镜 -->
			<div id="center-left">
				<div id="center-left-t">
					<a href="#"><img  id="ztp"></a>
				</div>
				<div id="center-left-lb">
					<i class="iconfont icon-xiangyoujiantou"></i>
					<ul>
						<li><a href="#"><img src="img/details/x1.jpg" ></a></li>
					</ul>
					<i class="iconfont icon-xiangyoujiantou"></i>
				</div>
			</div>
			<!-- 右边数据 -->
			<div id="center-right">
				<h3 class="center-right-mz"></h3>
				<div id="zn"></div>
				<div id="jg">
					<strong></strong>
					<span class="yj"></span>
					<a href=""><span><i class="iconfont icon-erweima"></i>手机购买</span>
						<img src="img/details/5.png">
					</a>
				</div>
				<!-- 限时购 -->
				<div id="time">
					<span>配送至</span>
					<div class="time-center">
						<ul>
							<li>北京</li>
							<li>北京市</li>
							<li>延庆县</li>
							<li>珍珠泉乡</li>
						</ul>
					</div>
					<div class="time-right">
						<span class="iconfont icon-xiangyoujiantou"></span>
					</div>
					<span class="myStock">有货</span>
				</div>
				<!-- 购买区 -->
				<div id="buy">
					<div class="amount">
						<span style="float: left;">数量</span>
						<button type="button">+</button>
						<span id="shuliang">1</span>
						<button type="button">-</button>
					</div>
					<div id="buy-bottom">
						<a href="">立即购买</a>
						<a class="tianjia">加入购物车</a>
					</div>
				</div>
			</div>
		</div>
		<!-- 详情页 -->
		<div id="particulars">
			<!-- 上面列表 -->
			<div id="particulars-top">
				<ul>
					<li><a href="#" class="xq">详情介绍</a></li>
					<li><a href="#" class="xq1">规格参数</a></li>
					<li><a href="#" class="xq2">晒单评价</a></li>
					<li><a href="#" class="xq3">售后服务</a></li>
				</ul>
			</div>
			<!-- 下面图片 -->
			<div id="particulars-center">
				<img src="img/details/ia_100000054.jpg" >
				<img src="img/details/ia_100000055.jpg" >
				<img src="img/details/ia_100000056.jpg" >
				<img src="img/details/ia_100000057.jpg" >
				<img src="img/details/ia_100000058.jpg" >
				<img src="img/details/ia_100000059.jpg" >
				<img src="img/details/ia_100000060.jpg" >
				<img src="img/details/ia_100000061.jpg" >
				<img src="img/details/ia_100000062.jpg" >
				<img src="img/details/ia_100000063.jpg" >
				<div id="particulars-center-bot">
					<p>规格参数</p>
					<div id="ro">
						<table bordercollapse="0">
							<tbody>
								<tr>
									<td><h5>基本信息</h5></td>
									<td class="nr">
										<dl>
											<dt>品牌</dt>
											<dd>康佳（KONKA）</dd>
											<dt>型号</dt>
											<dd>LED75A3</dd>
											<dt>屏幕尺寸</dt>
											<dd>75英寸</dd>
											<dt>屏幕分辨率</dt>
											<dd>超高清4K</dd>
											<dt>产品颜色</dt>
											<dd>银色</dd>
											<dt>背光方式</dt>
											<dd>直下式</dd>
											<dt>支持格式</dt>
											<dd>2160p</dd>
										</dl>
									</td>
								</tr>
							</tbody>
						</table>
						<table bordercollapse="0">
							<tbody>
								<tr>
									<td><h5>特性参数</h5></td>
									<td class="nr">
										<dl>
											<dt>网络连方式</dt>
											<dd>支持有线&无线</dd>
											<dt>运行内存</dt>
											<dd>4GB</dd>
											<dt>存储容量</dt>
											<dd>32GB</dd>
											<dt>HDR</dt>
											<dd>支持</dd>
										</dl>
									</td>
								</tr>
							</tbody>
						</table>
						<table bordercollapse="0">
							<tbody>
								<tr>
									<td>
										<h5>端口参数</h5>
									</td>
									<td class="nr">
										<dl>
											<dt>USB2.0接口</dt>
											<dd>1</dd>
											<dt>USB3.0接口</dt>
											<dd>1</dd>
											<dt>HDMI1.3接口</dt>
											<dd>无</dd>
											<dt>HDMI1.4接口</dt>
											<dd>无</dd>
											<dt>HDMI2.0接口</dt>
											<dd>2</dd>
										</dl>
									</td>
								</tr>
							</tbody>
						</table>
						<table bordercollapse="0">
							<tbody>
								<tr>
									<td><h5>规格参数</h5></td>
									<td class="nr">
										<dl>
											<dt>含底座尺寸（宽*高*...</dt>
											<dd>约1872*1318*272</dd>
											<dt>含底座重量（kg）</dt>
											<dd>65.3kg</dd>
										</dl>
									</td>
								</tr>
							</tbody>
						</table>
						<table bordercollapse="0">
							<tbody>
								<tr>
									<td><h5>外观设计</h5></td>
									<td class="nr">
										<dl>
											<dt>边框材质</dt>
											<dd>金属</dd>
											<dt>边框宽窄</dt>
											<dd>超窄边框</dd>
											<dt>机身厚薄</dt>
											<dd>超薄机身</dd>
											<dt>底座配置</dt>
											<dd>外置底座</dd>
											<dt>安装孔距</dt>
											<dd>200*200</dd>
										</dl>
									</td>
								</tr>
							</tbody>
						</table>
						<table bordercollapse="0">
							<tbody>
								<tr>
									<td><h5>互联互通</h5></td>
									<td class="nr">
										<dl>
											<dt>WIFI</dt>
											<dd>支持</dd>
										</dl>
									</td>
								</tr>
							</tbody>
						</table>
						<table bordercollapse="0">
							<tbody>
								<tr>
									<td><h5>服务承诺</h5></td>
									<td class="nr">
										<dl>
											<dt>机箱附件</dt>
											<dd>电视*1、底座*1、说明书*1、摇控器*1、保修卡*1、电源线*1</dd>
											<dt>全国联保</dt>
											<dd>整机一年，主要部件三年</dd>
										</dl>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="evaluate">
					<p>晒单评价</p>
					<div id="evaluate-pj">
						暂无
					</div>
				</div>
				<div class="evaluate" style="padding-top: 20px;">
					<p>售后服务</p>
					<img src="img/details/ia_100000064.jpg" >
					<img src="img/details/ia_100000065.jpg" >
					<img src="img/details/ia_100000066.jpg" >
					<img src="img/details/ia_100000067.jpg" >
					<img src="img/details/ia_100000068.jpg" >
					<img src="img/details/ia_100000069.jpg" >
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<footer></footer>
	</body>
</html>
<script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/cookieTools.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$("header").load("head.html");
	$("footer").load("footer.html");
	// 右引入侧边栏
	$("aside").load("sidebar.html");
	// 右引入侧边栏
	$("aside").load("sidebar.html");
	$("#center #center-right #jg a").mouseover(function() {
		$("#center #center-right #jg a img").stop().animate({
			display: "block",
			opacity: 1
		})
		$("#center #center-right #jg a img").css({
			display: "block"
		})
	})
	$("#center #center-right #jg a").mouseout(function() {
		$("#center #center-right #jg a img").stop().animate({
			opacity: 0
		})
		$("#center #center-right #jg a img").css({
			display: "none"
		})
	})
	// 左边放大镜
	$("#center-left #center-left-t").mousemove(function(evt){
		let e=evt || event;
		$("#center-left #center-left-t img").css({
			position:'absolute',
			top: -e.pageY+$("#center-left-t").offset().top,
			left: -e.pageX+$("#center-left-t").offset().left,
			width: 940,
			height: 1112,
			border: "none",
			maxWidth: "none",
			maxHeight: "none",
		})
	})
	$("#center-left #center-left-t").mouseout(function(){
		$("#center-left #center-left-t img ").css({
			position:'absolute',
			top: 0,
			left: 3,
			height: 548,
			width:530
		})
	})
		
	$("#center-left-lb ul li a").eq(0).css({
		border: '1px solid red'
	})
	$("#center-left-lb ul li a").mouseover(function(){
		// $("#center-left-t a").html($(this).html())
		$(this).css({
			border: '1px solid red'
		})
		$("#center-left-lb ul li a").not(this).css({
			border: 'none'
		})
	})

	function GetQueryString(name){
	    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
	    var r = window.location.search.substr(1).match(reg);
	    if(r!=null)return  unescape(r[2]); return null;
	}
	let id = GetQueryString("id");
		console.log(id);
	$.get("./php/getGoodsInfo.php",'goodsId='+id,function(resText){
		getData(resText);
	})
	function getData(resText){
		let data =JSON.parse(resText) ;
		console.log(data);
		if(data.goodsId == GetQueryString("id")){
			$(".dstp").html(data.goodsName);
			$("#ztp").attr('src',data.goodsImg);
			$(".center-right-mz").html(data.goodsName);
			$("#zn").html(data.goodsDesc);
			$("strong").html(`￥${data.goodsPrice}`);
			$(".yj").html(`￥${data.beiyong1}`);
		}
		console.log(data.goodsId);
		$(".tianjia").click(function(){
			if(getCookie("username") !=''){
				$.post("./php/addShoppingCart.php","vipName="+getCookie("username")+"&goodsId="+data.goodsId+"&goodsCount="+$("#sl").val(),function(data) {
					console.log(data);
				})
				$(".tianjia").attr('href',`shopping-later.html?id=${id}`);
			}else{
				$(".tianjia").attr('href','login.html');
			}
		})
	}
	// 详情点击转跳
	$(".xq1").click(function(){
		$("body,html").animate({
			scrollTop:$("#particulars-center-bot").offset().top-100
		},500)
	})
	$(".xq2").click(function(){
		$("body,html").animate({
			scrollTop:$(".evaluate").offset().top-100
		},500)
	})
	$(".xq3").click(function(){
		$("body,html").animate({
			scrollTop:$(".evaluate").offset().top
		},500)
	})
	class shopping{
		click(){
			let that = this
			for(let i=0 ;i<$("button").length;i++){
				console.log(i);
				if(i%2){
					$("button").eq(i).click(function(){
						that.decreaseSp($(this));
						
					})
				}else{
					$("button").eq(i).click(function(){
						that.IncreaseSp($(this));
					})
				}	
			} 
		}
		// 减少商品
		decreaseSp(btn){
			let osl = btn.prev();
			let that = this;
			// 减少数量
			if(osl.html()>0){
				osl.html(osl.html()*1-1)
			}		
		}
		//增加商品
		IncreaseSp(btn){
			let that = this;
			let osl = btn.next();
			// 增加数量
			osl.html(osl.html()*1+1);
		}
	}
	let gou= new shopping();
	gou.click();
</script>
